<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>冒泡委托</title>
		<style>
			#wrapper{
				width: 800px;
				height: 800px;
				border: 2px solid greenyellow;
			}
			ul{
				width: 600px;
				height: 400px;
				border: 2px gray solid;
			}
			li{
				width: 500px;
				height: 60px;
				margin: 10px;
				background-color: pink;
			}
		</style>
		
	</head>
	<body>
		<div id="wrapper">
			<ul>
				<li>list content 1</li>
				<li>list content 2</li>
				<li>list content 3</li>
				<li>list content 4</li>
				<li>list content 5</li>
			</ul>
		</div>
		<script>
			document.querySelector('#wrapper').addEventListener('click',function(e){
				const t = e.target;
				console.log(t.innerHTML+"is clicked!");
			})
			
		</script>
	</body>
</html>